import QQMapWX from '../../../libs/qqmap-wx-jssdk.min'
// 用于参数验证
import Schema from 'async-validator'
import { reqAddAddress, reqAddressInfo, reqUpdateAddress } from '../../../api/address'

Page({
  // 页面的初始数据
  data: {
    name: '', //收货人
    phone: '', //手机号码
    provinceName: '', //省
    provinceCode: '', //省编码
    cityName: '', //市
    cityCode: '', //市编码
    districtName: '', //区
    districtCode: '', //区编码
    address: '', //详细地址
    fullAddress: '', //完整地址
    isDefault: false //是否设置为默认地址 1为设置
  },

  // 保存收货地址
  async saveAddrssForm(event) {
    // 拼接完整地址
    const { provinceName, cityName, districtName, address, isDefault } = this.data
    // 最终需要发送的请求参数
    const params = {
      ...this.data,
      fullAddress: provinceName + cityName + districtName + address,
      isDefault: isDefault ? 1 : 0
    }
    // 对组织以后得参数进行验证 验证通过后 调用接口实现新增地址功能

    const { valid } = await this.validatorAddress(params)
    // 如果验证失败 直接不执行之后逻辑
    if (!valid) return
    // 验证通过后 调用接口实现新增地址功能
    const res = this.addressId
      ? await reqUpdateAddress(params)
      : await reqAddAddress(params)
    if (res.code === 200) {
      // 返回到收货地址页面
      wx.navigateBack()
      // 需要提示用户
      wx.toast({ title: this.addressId ? '更新收货地址成功' : '新增收货地址成功' })
    }
  },

  // 对新增收货地址请求参数进行验证
  validatorAddress(params) {
    // 验证收货人，是否只包含大小写字母、数字和中文字符
    const nameRegExp = '^[a-zA-Z\\d\\u4e00-\\u9fa5]+$'

    // 验证手机号，是否符合中国大陆手机号码的格式
    const phoneReg = '^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$'

    // 创建验证规则
    const rules = {
      name: [
        { required: true, message: '请输入收货人姓名' },
        { pattern: nameRegExp, message: '收货人姓名不合法' }
      ],
      phone: [
        { required: true, message: '请输入收货人手机号' },
        { pattern: phoneReg, message: '收货人手机号不合法' }
      ],
      provinceName: { required: true, message: '请选择收货人所在地区' },
      address: { required: true, message: '请输入详细地址' }
    }

    // 传入验证规则进行实例化
    const validator = new Schema(rules)
    // 调用实例方法对请求参数进行验证
    // 注意：我们希望将验证结果通过Promise的方式返回给函数调用者
    return new Promise((resolve) => {
      validator.validate(params, (errors) => {
        if (errors) {
          // 验证失败
          wx.toast({ title: errors[0].message })
          // 属性值为false 验证失败
          resolve({ valid: false })
        } else {
          resolve({ valid: true })
        }
      })
    })
  },

  // 省市区选择
  onAddressChange(event) {
    // 解构省市区以及编码
    const [provinceName, cityName, districtName] = event.detail.value
    const [provinceCode, cityCode, districtCode] = event.detail.code
    this.setData({
      provinceName,
      cityName,
      districtName,
      provinceCode,
      cityCode,
      districtCode
    })
  },

  // 获取用户地理位置信息 方法一
  /*   async onLocation() {
    // 调用wx.getSetting()获取用户授权信息authSetting 查询用户是否授权位置信息
    const { authSetting } = await wx.getSetting()
    // console.log(authSetting)
    if (authSetting['scope.userLocation'] === false) {
      // 用户拒绝获取位置信息后再次发起授权
      // 需要弹出弹窗询问用户
      const modalRes = await wx.modal({
        title: '授权提示',
        content: '需要获取地理位置信息,请授权'
      })
      // 如果用户点击取消 说明用户拒绝授权 需要给用户进行提示
      if (!modalRes) return wx.toast({ title: '您拒绝了授权' })
      // 如果用户点击了确定 说明用户同意授权 则打开授权页面
      const { authSetting } = await wx.openSetting()
      // 如果没有更新授权信息，则提示用户授权失败
      if (!authSetting['scope.userLocation'])
        return wx.toast({ title: '授权失败' })
      // 如果更新授权信息，则获取用户位置信息
      try {
        // 使用getLocation 用户拒绝授权后 不会再弹出授权弹窗
        const res = await wx.getLocation()
        console.log(res)
      } catch (error) {
        wx.toast({
          title: '您拒绝授权获取地理位置'
        })
      }
    } else {
      try {
        // const res = await wx.chooseLocation()
        // 使用getLocation 用户拒绝授权后 不会再弹出授权弹窗
        const res = await wx.getLocation()
        console.log(res)
      } catch (error) {
        wx.toast({
          title: '您拒绝授权获取地理位置'
        })
      }
    }
  }, */

  // 获取用户地理位置信息 方法二
  async onLocation() {
    // longitude经度 latitude纬度 name  地点
    const { longitude, latitude, name } = await wx.chooseLocation()
    // 使用实例化方法 reverseGeocoder 进行逆地址解析
    this.qqmaxwx.reverseGeocoder({
      location: {
        longitude,
        latitude
      },
      success: (res) => {
        // 获取省市区 省市区编码
        const { adcode, province, city, district } = res.result.ad_info
        // 获取街道、门牌
        const { street, street_number } = res.result.address_component
        // 获取标准地址
        const { standard_address } = res.result.formatted_addresses
        // 对获取的数据进行格式化、组织 然后赋值给data中的字段
        this.setData({
          provinceName: province,
          // 如果是省 前两位有值 后四位为0
          provinceCode: adcode.replace(adcode.substring(2, 6), '0000'),
          cityName: city,
          // 如果是市 前四位有值 后两位为0
          cityCode: adcode.replace(adcode.substring(4, 6), '00'),
          districtName: district,
          // 区
          // 东莞市、中山市、儋州市、嘉峪关市 因其下无区县级
          districtCode: district && adcode,
          // 组织详细地址
          address: street + street_number + name,
          // 组织完整地址
          fullAddress: standard_address + name
        })
      }
    })
  },

  // 用来处理更新相关逻辑
  async showAddressInfo(id) {
    // 如果没有传入id 则不执行更新逻辑
    if (!id) return

    // 将id挂载到当前页面实例上 方便在多个方法中使用
    this.addressId = id
    // 动态设置当前页面标题
    wx.setNavigationBarTitle({
      title: '更新收货地址'
    })

    // 获取需要更新的收货地址详情
    const { data } = await reqAddressInfo(id)
    // 将获取到的信息回显到页面上
    this.setData(data)
  },

  onLoad(options) {
    // 对核心类进行实例化
    this.qqmaxwx = new QQMapWX({
      // 逆解析时候，需要在腾讯位置服务后台配置额度
      key: 'C7QBZ-4QFLJ-JU2FB-DUD3X-TTHQ2-5AFR3'
    })
    this.showAddressInfo(options.id)
  }
})
